<script setup lang='ts'>
import { useGetJcProductReportDetail } from '@fl/api/man-api'
import { SearchForm } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const visible = defineModel<boolean>('visible')

const id = defineModel<null | string>('id')

const detailId = computed(() => {
    return id.value
})

const { data, isLoading } = useGetJcProductReportDetail(detailId)

const state = ref<any>({})

const columns = [
    {
        colProps: {
            span: 24,
        },
        label: '产品报告ID',
        prop: 'id',
        valueType: 'text',
    },
    {
        colProps: {
            span: 24,
        },
        label: '检测单位',
        prop: 'reportDetectingUnit',
        valueType: 'text',
    },
    {
        colProps: {
            span: 24,
        },
        label: '检测时间',
        prop: 'reportDetectionTime',
        valueType: 'text',
    },
    {
        colProps: {
            span: 24,
        },
        label: '报告照片',
        prop: 'reportImage',
        valueType: 'text',
    },
]

const title = computed(() => {
    return data.value?.reportName
})

function cancel() {
    id.value = ''
    visible.value = false
}

watchEffect(() => {
    if (data.value) {
        state.value = cloneDeep(data.value)
    }
})

const reportImageList = computed(() => {
    try {
        const result = JSON.parse(data.value.reportImage)
        if (Array.isArray(result)) {
            return result.map((item: any) => item.url)
        }
        return []
    }
    catch (error) {
        return []
    }
})
</script>

<template>
    <el-dialog v-model="visible"
               :title="title"
               width="700"
               :close-on-click-modal="false"
               destroy-on-close
               align-center
               @closed="cancel"
    >
        <el-skeleton v-if="isLoading"
                     :rows="5"
        />

        <div v-else
             class="py-20"
        >
            <SearchForm v-model="state"
                        :columns="columns"
                        submit-text="查询"
                        class="mb-20"
                        :has-footer="false"
                        label-position="top"
            >
                <template #plus-field-reportImage>
                    <div v-if="reportImageList.length"
                         class="p-10 flex flex-wrap gap-10"
                    >
                        <el-image v-for="item in reportImageList"
                                  :key="item"
                                  style="width: 100px; height: 50px"
                                  :src="item"
                                  fit="cover"
                                  :preview-src-list="[item]"
                        />
                    </div>
                </template>
            </SearchForm>
        </div>

        <template #footer>
            <div class="dialog-footer flex justify-center">
                <el-button @click="cancel">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
li {
    margin-bottom: 10px;
}
</style>
